<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item v-for="menu in allmenu" :key="menu.key" :index="menu.key">{{
      menu.server
    }}</el-menu-item>
  </el-menu>
</template>
<script>
import { serverReq } from "../api/req";
export default {
  data() {
    let obj = {
      allmenu: [],
    };

    this.allmenu = [
      {
        key: 1,
        server: "内网测试 ip:127.0.0.1",
      },
      {
        key: 2,
        server: "内网正式 ip:127.0.0.1",
      },
    ];

    return obj;
  },
  created() {
    serverReq().then((res) => {
      this.allmenu = res;
    });
    this.activeIndex = 1;
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$store.commit("changeNavConActiveIndex", key);
    },
  },
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
</style>